<script setup lang="ts">
definePage({
  name: 'demo-object',
  style: {
    navigationBarTitleText: '对象路径跳转',
  },
})

const router = useRouter()
const route = useRoute()

function goBack() {
  router.back()
}

function pushToParams() {
  router.push({ name: 'demo-params', params: { username: 'eduardo' } })
}

function pushToQuery() {
  router.push({ path: '/pages/router/demo-query', query: { keyword: 'vue', type: 'framework' } })
}
</script>

<template>
  <view class="page-wrapper">
    <!-- 头部 -->
    <view class="header-container">
      <view class="header-content">
        <view class="header-icon">
          🎯
        </view>
        <view class="header-title">
          对象路径跳转演示
        </view>
        <view class="header-subtitle">
          使用 router.push({ path: '/path' }) 进行跳转
        </view>
      </view>
    </view>

    <!-- 跳转信息 -->
    <demo-block title="跳转信息" transparent>
      <view class="info-card">
        <view class="info-title">
          当前页面信息
        </view>
        <view class="info-items">
          <view class="info-item">
            <text class="info-label">
              路径:
            </text>
            <text class="info-value">
              {{ route.path }}
            </text>
          </view>
          <view class="info-item">
            <text class="info-label">
              跳转方式:
            </text>
            <text class="info-value-alt">
              对象路径
            </text>
          </view>
          <view class="info-item no-border">
            <text class="info-label">
              代码:
            </text>
            <text class="info-value">
              router.push({ path: '/pages/router/demo-object' })
            </text>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- 参数传递演示 -->
    <demo-block title="参数传递演示" transparent>
      <view class="param-cards">
        <view class="param-card">
          <view class="param-title">
            params 参数传递
          </view>
          <view class="param-subtitle">
            使用 name + params 组合传递参数
          </view>
          <view class="code-block">
            <text class="code-text">
              router.push({ name: 'demo-params', params: { username: 'eduardo' } })
            </text>
          </view>
          <wd-button type="primary" block @click="pushToParams">
            跳转并传递 params
          </wd-button>
        </view>

        <view class="param-card">
          <view class="param-title">
            query 参数传递
          </view>
          <view class="param-subtitle">
            使用 path + query 组合传递参数
          </view>
          <view class="code-block">
            <text class="code-text">
              router.push({ path: '/demo-query', query: { keyword: 'vue' } })
            </text>
          </view>
          <wd-button type="success" block @click="pushToQuery">
            跳转并传递 query
          </wd-button>
        </view>
      </view>
    </demo-block>

    <!-- 操作按钮 -->
    <demo-block title="导航" transparent>
      <wd-button type="warning" block @click="goBack">
        返回上一页
      </wd-button>
    </demo-block>
  </view>
</template>

<style lang="scss" scoped>
.page-wrapper {
  min-height: 100vh;
  padding: 12px 0;
  background-color: #f7f7f7;
}

.dark .page-wrapper {
  background-color: var(--wot-dark-background);
}

.header-container {
  margin: 0 12px 12px;
}

.header-content {
  padding: 24px 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
}

.dark .header-content {
  background-color: var(--wot-dark-background2);
}

.header-icon {
  margin-bottom: 12px;
  font-size: 32px;
}

.header-title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.dark .header-title {
  color: var(--wot-dark-color);
}

.header-subtitle {
  font-size: 14px;
  color: #666;
}

.dark .header-subtitle {
  color: var(--wot-dark-color2);
}

.info-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
}

.dark .info-card {
  background-color: var(--wot-dark-background2);
}

.info-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .info-title {
  color: var(--wot-dark-color);
}

.info-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;

  &.no-border {
    border-bottom: none;
  }
}

.dark .info-item {
  border-bottom-color: var(--wot-dark-border);
}

.info-label {
  font-size: 14px;
  color: #666;
}

.dark .info-label {
  color: var(--wot-dark-color2);
}

.info-value {
  font-family: monospace;
  font-size: 14px;
  color: #333;
}

.dark .info-value {
  color: var(--wot-dark-color);
}

.info-value-alt {
  font-size: 14px;
  color: #333;
}

.dark .info-value-alt {
  color: var(--wot-dark-color);
}

.param-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.param-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .param-card {
  background-color: var(--wot-dark-background2);
}

.param-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .param-title {
  color: var(--wot-dark-color);
}

.param-subtitle {
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.dark .param-subtitle {
  color: var(--wot-dark-color2);
}

.code-block {
  margin-bottom: 12px;
  padding: 12px;
  background-color: #f7fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.dark .code-block {
  background-color: var(--wot-dark-background3);
  border-color: var(--wot-dark-border);
}

.code-text {
  font-family: monospace;
  font-size: 12px;
  color: #4a5568;
}

.dark .code-text {
  color: var(--wot-dark-color);
}
</style>
